import * as echarts from 'echarts'

//生成折柱图option
export const line_bar_chart = (item) => {
  let dataList = []
  let yAxisIndex = 0
  let yAxisName = null
  for (let i = 0; i < item.data.length; i++) {
    yAxisIndex += parseInt(item.data[i].yAxisIndex)
    yAxisName = item.data[i].yAxisName
    dataList.push(line_bar_series(item.legend != undefined ? item.legend[i] : '', item.data[i].type, item.data[i].topLine, item.data[i].data, item.color[i], item.barWidth, item.borderColor, item.data[i].yAxisIndex, item.data[i].fontColor, item.data[i].topLineLabel))
  }
  let dataZoom = getdataZoom(item.dataZoom)
  if (item.legendSeat == undefined) {
    item.legendSeat = {
      left: 'center'
    }
  }
  return {
    tooltip: {
      trigger: 'axis',
      axisPointer: { type: 'cross' },
      formatter: function(params) {
        let str = params[0].name + '<br/>'
        for (let i = 0; i < params.length; i++) {
          if (item.unit){
            if (item.unit > i){
              str += '<span style="font-size: 14px;font-weight: bold;">' + params[i].marker + params[i].seriesName + '</span>  ' + params[i].value+'万' + (item.tooltipName ? item.tooltipName : '') + '<br/>'
            }else {
              str += '<span style="font-size: 14px;font-weight: bold;">' + params[i].marker + params[i].seriesName + '</span>  ' + params[i].value + (item.tooltipName ? item.tooltipName : '') + '<br/>'
            }
          }else {
            if (item.company){
              str += '<span style="font-size: 14px;font-weight: bold;">' + params[i].marker + params[i].seriesName + '</span>  ' + params[i].value+ (item.company[params[i].seriesIndex]?item.company[params[i].seriesIndex]:'') + (item.tooltipName ? item.tooltipName : '') + '<br/>'
            }else {
              str += '<span style="font-size: 14px;font-weight: bold;">' + params[i].marker + params[i].seriesName + '</span>  ' + params[i].value + (item.tooltipName ? item.tooltipName : '') + '<br/>'
            }
          }
        }
        return str
      }
    },
    legend: {
      show: item.legend != undefined ? true : false,
      data: item.legend,
      textStyle: {
        color: item.fontColor != undefined ? item.fontColor : '#FFF'
      },
      ...item.legendSeat
    },
    ...dataZoom,
    grid: {
      top: item.grid != undefined ? item.grid[0] : '',
      bottom: item.grid != undefined ? item.grid[1] : '',
      left: item.grid != undefined ? item.grid[2] : '',
      right: item.grid != undefined ? item.grid[3] : '',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: item.xData,
        axisPointer: {
          label: {
            backgroundColor: '#FFF',
            color: '#000',
            show: true
          }
        },
        axisLine: {
          lineStyle: {
            color: item.fontColor != undefined ? item.fontColor : '#FFF'
          }
        }
      }
    ],
    yAxis: [
      {
        show: true,
        type: 'value',
        axisLine: {
          lineStyle: {
            color: item.fontColor != undefined ? item.fontColor : '#FFF'
          }
        },
        axisPointer: {
          label: {
            backgroundColor: '#FFF',
            color: '#000',
            show: true
          }
        },
        splitLine: {
          show: false
        },
        axisLabel: {
          formatter: '{value}'
        }
      },
      {
        show: yAxisIndex != 0,
        type: 'value',
        splitLine: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: item.fontColor != undefined ? item.fontColor : '#FFF'
          }
        },
        axisPointer: {
          label: {
            backgroundColor: '#FFF',
            color: '#000',
            show: true
          }
        },
        min: function(value) {
          return value.min
        },
        axisLabel: {
          formatter: yAxisName ? '{value}' : '{value}%'
        }
      }
    ],
    series: dataList
  }
}

export const pie_bar_chart = (item) => {
  return {
    title: {
      text: item.title,
        left: 'center',
        textStyle: {
        color: item.titleColor?item.titleColor:'#fff',
        show: item.title != undefined
      }
    },
    tooltip: {
      trigger: 'item',
        formatter: "{b} : {c} ({d}%)"
    },
    series: [{
      type: 'pie',
      center: item.center?item.center:['50%', '50%'],
      radius: item.radius?item.radius:['0', '60%'],
      clockwise: true,
      avoidLabelOverlap: true,
      hoverOffset: 15,
      itemStyle: {
        normal: {
          color: function(params) {
            return item.color[params.dataIndex][0]
          }
        }
      },
      label: {
        show: true,
        position: 'outside',
        formatter: '{a|{b}\n{d}%}',
        color: item.fontColor?item.fontColor:'#FFF',
        rich: {
          hr: {
            backgroundColor: 't',
            borderRadius: 3,
            width: 3,
            height: 3,
          },
        }
      },
      labelLine: {
        normal: {
          length: 20,
          length2: 30,
          lineStyle: {
            width: 1
          }
        }
      },
      data: item.data,
    }]
  }
}

//柱状图或者折线图
export function line_bar_series(name, type, topLine, data, color, barWidth, borderColor, yAxisIndex, fontColor, topLineLabel) {
  console.log(topLine, fontColor)
  if (type == 0 || type == 3) {
    return {
      name: name,
      type: type == 0 ? 'bar' : 'line',
      smooth: true,
      yAxisIndex: yAxisIndex,
      lineStyle: {
        width: 1,
        color: color[0] //绿线颜色
      },
      label: {
        show: topLine,
        position: topLineLabel?topLineLabel:'right',
        backgroundColor: 'transparent',
        fontSize: '13',
        color: fontColor != undefined ? fontColor : '#FFF'
      },
      areaStyle: {
        normal: {
          color: color.length == 2 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: color[0] // 折线底下区域渐变色
          }, {
            offset: 1,
            color: color[1] // 折线底下区域渐变色
          }], false) : color[0]
        }
      },
      itemStyle: {
        color: color.length == 2 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: color[0]
        },
          {
            offset: 1,
            color: color[1]

          }]) : color[0],
        borderWidth: 1,
        blur: 20,
        shadowColor: '#000'
      },
      barWidth: barWidth == undefined ? '25px' : barWidth + 'px',
      data: data
    }
  } else {
    return {
      name: name,
      type: type == 0 ? 'bar' : 'line',
      label: {
        show: topLine,
        position: 'right',
        backgroundColor: 'transparent',
        fontSize: '13',
        color: fontColor != undefined ? fontColor : '#FFF'
      },
      smooth: true,
      yAxisIndex: yAxisIndex,
      lineStyle: {
        width: 2,
        color: color[0] //绿线颜色
      },
      itemStyle: {
        color: color.length == 2 ? new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
          offset: 0,
          color: color[0]
        },
          {
            offset: 1,
            color: color[1]

          }]) : color[0],
        borderWidth: 1,
        blur: 20,
        shadowColor: '#000'
      },
      barWidth: barWidth == undefined ? '25px' : barWidth + 'px',
      data: data
    }
  }
}

//下方滚动条
function getdataZoom(dataZoom) {
  if (!dataZoom) return
  return {
    dataZoom: [
      {
        type: 'slider',
        show: dataZoom ? true : false,
        height: 20,
        bottom: 0,
        start: 0,
        end: 30,
        textStyle: {
          color: '#d4ffff',
          fontSize: 11
        }
      },
      {
        type: 'inside'
      }
    ]
  }
}

//地图标点
export const outsidePunctuation = (data, colorList) => {
  return getPunctuation(data, colorList)
}

function getPunctuation(data, colorList) {
  return {
    type: 'effectScatter',
    coordinateSystem: 'geo',
    rippleEffect: {
      brushType: 'stroke'
    },
    showEffectOn: 'render',
    itemStyle: {
      normal: {
        color: {
          type: 'radial',
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0,
              color: colorList[0]
            },
            {
              offset: 0.8,
              color: colorList[1]
            },
            {
              offset: 1,
              color: colorList[2]
            }
          ],
          global: false // 缺省为 false
        }
      }
    },
    label: {
      normal: {
        color: item.fontColor != undefined ? item.fontColor : '#FFF',
        formatter: '{b}',
        position: 'top',
        show: true
      },
      emphasis: {
        show: true
      }
    },
    symbol: 'circle',
    symbolSize: function(val) {
      // return (val[2] / maxData) * 4;
      return 10
    },
    data: data,
    zlevel: 1
  }
}

export const generateColors = (number) => {
  let colorList = [];
  for (let i = 0; i < number; i++) {
    // 生成一个随机颜色
    let color = '#' + Math.floor(Math.random()*16777215).toString(16);
    colorList.push([color]);
  }
  return colorList
}
